<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
        <meta name="format-detection" content="telephone=no, email=no" />
        <meta name="renderer" content="webkit" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta
            name="viewport"
            content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
        />
        <title>扩展高级选项设置</title>
        <link href="/options_ui/css/app.css" type="text/css" rel="stylesheet" />
        <link
            href="/third_party/josdejong/svelte-jsoneditor/main/themes/jse-theme-dark.css"
            type="text/css"
            rel="stylesheet"
        />
        <style>
            .nav-bar-index {
                margin-left: 800px;
            }
            .nav-bar-link {
                font-size: 1.2rem;
                line-height: 1.2rem;
                text-decoration: none;
                color: #0d6efd;
            }
            .nav-bar-link:focus,
            .nav-bar-link:hover {
                color: #0d6efd;
            }
            .nav-bar-test {
                margin-left: 20px;
            }
        </style>
    </head>
    <body>
        <h1>扩展高级选项设置</h1>
        <a
            target="_blank"
            href="/options_ui/index.html"
            class="nav-bar-link nav-bar-index"
            >扩展默认选项设置</a
        >
        <a
            target="_blank"
            href="/sandbox/index.html"
            class="nav-bar-link nav-bar-test"
            >测试例子</a
        >
        <div class="wrap">
            <div class="container">
                <section class="box">
                    <h2>选项一：全局动态规则处理</h2>
                    <button class="backup-self-defined-dynamic-rule">
                        备份自定义动态规则
                    </button>
                    <span class="placeholder-box"></span>
                    <span class="placeholder-box"></span>
                    <button class="delete-all-dynamic-rule">
                        清空所有动态规则
                    </button>
                    <h5></h5>
                    <button
                        class="example-show-controller"
                        data-state="hidden-example"
                    >
                        显示演示例子
                    </button>
                    <h5></h5>
                    <button class="goto-sync-remote-repository-static-rule">
                        同步远端仓库最新静态规则到本地，并停用本地默认静态规则
                    </button>
                    <span class="placeholder-box"></span>
                    <button class="enable-static-rule">
                        启用本地默认静态规则
                    </button>

                    <h5></h5>
                    <button class="delete-sync-remote-rule">
                        清空所有已同步的远端动态规则
                    </button>
                    <h5></h5>
                    <button class="delete-self-define-rule">
                        清空所有自定义动态规则(特制除外)
                    </button>
                    <span class="placeholder-box"></span>
                    <button class="delete-self-define-special-rule">
                        清空所有自定义特制动态规则
                    </button>
                </section>
                <section class="box">
                    <h2>选项二：同步远端配置规则</h2>
                    <textarea
                        class="remote-rule-urls"
                        cols="100"
                        rows="10"
                        placeholder="远程服务端地址，每行一个地址"
                    ></textarea>
                    <h4></h4>
                    <button class="goto-sync-remote-rule">
                        同步远端配置规则
                    </button>
                    <span class="placeholder-box"></span>
                    <button
                        class="autofill-default-remote-rule example-item example-hidden"
                    >
                        演示例子：载入远端地址
                    </button>
                    <div class="external-page-box"></div>
                </section>
                <section class="box">
                    <h2>选项三：自定义规则</h2>
                    <textarea
                        class="new-add-rule-pannel"
                        cols="100"
                        rows="20"
                        placeholder="自定义规则"
                    ></textarea>
                    <h5></h5>
                    <button type="button" class="add-rule">新增规则</button>
                    <span class="placeholder-box"></span>
                    <button type="button" class="add-special-rule">
                        新增特制规则
                    </button>
                    <span class="placeholder-box"></span>
                    <span class="placeholder-box"></span>
                    <label for="upload-file-to-rule">
                        <button type="button" class="add-rule-from-file">
                            通过文件上传规则(仅支持json和txt)
                        </button>
                        <input
                            type="file"
                            id="upload-file-to-rule"
                            name="upload-file-to-rule"
                            hidden
                            accept="application/json,text/plain,text/txt"
                        />
                    </label>
                    <span class="placeholder-box"></span>
                    <span class="placeholder-box"></span>
                    <label for="dropbox">
                        <button id="dropbox" class="dropbox">
                            拖拽文件到这里
                        </button>
                    </label>
                    <h5></h5>
                    <br />
                    <label
                        class="autofill-self-define-rule example-item example-hidden"
                    >
                        <button data-rule="redirect-domain">
                            例子：域名重定向
                        </button>
                        <button data-rule="block-domain">
                            例子：屏蔽指定域名(jingjingxyk.com)
                        </button>
                        <button data-rule="modify-header-ua">
                            例子：请求头修改 UserAgent
                        </button>

                        <button data-rule="modify-header-request-x">
                            例子：请求头添加参数 x-header-param
                        </button>
                        <h5></h5>
                        <button data-rule="modify-header-request-cookie">
                            例子：请求头修改 cookie
                        </button>
                        <button data-rule="modify-header-response-x">
                            例子：响应头添加参数
                        </button>
                        <button data-rule="modify-header-response-csp">
                            例子：响应头移除content-security-policy
                        </button>
                        <button data-rule="redirect-to-extension-path">
                            例子：域名重定向扩展提供的页面
                        </button>
                    </label>

                    <br />
                </section>
                <section class="box">
                    <h2>选项四：已启用规则列表：</h2>
                    <h3>1）静态规则列表：</h3>
                    <div class="list-group">
                        <ul class="rule_static_set_list">
                            <li></li>
                        </ul>
                    </div>
                    <h3>2）动态规则列表：🔃</h3>
                    <div class="dynamic-rule-list-note">
                        <span>
                            默认选项切换规则编号（固定编号）： 编号<10000
                            <br />
                            自定义特制规则编号： 10000>=编号<=19999
                            <br />
                            自定义规则编号： 20000>=编号<=29999
                            <br />
                            同步远端静态规则编号：30000<=编号<=39999
                            <br />
                            同步远端动态规则编号：40000<=编号<=320000
                            <br />
                            其他编号： 未定义
                        </span>
                    </div>

                    <div class="list-group">
                        <ul class="rule_dynamic_set_list">
                            <li></li>
                        </ul>
                    </div>
                    <div class="show-rule-info-box">
                        <div class="show-rule-info-box-content">
                            <h3>3）规则详情展示：</h3>
                            <div>
                                <textarea
                                    cols="100"
                                    rows="20"
                                    id="rule-content-container"
                                ></textarea>
                                <h5></h5>
                                <button type="button" class="update-rule">
                                    保存已修改的规则
                                </button>
                                <span class="placeholder-box"></span>
                                <button
                                    type="button"
                                    class="back-new-rule-to-json"
                                >
                                    备份当前规则到JSON文件
                                </button>
                                <span class="placeholder-box"></span>
                                <button type="button" class="format-rule-code">
                                    格式化当前规则
                                </button>
                            </div>
                            <div><span class="notice"></span></div>
                            <div id="jsoneditor" class="jse-theme-dark"></div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <script src="/options_ui/js/main.js"></script>
    </body>
</html>
